<script setup lang="ts">
  import { ref } from 'vue'

  // 弹层的引用
  const popupRef = ref()

  // 点击蒙层
  const onMaskClick = () => {
    console.log('蒙层点击了...')
    popupRef.value.close()
  }

  // 打开弹层
  const openPopup = () => {
    popupRef.value.open()
  }

  // 关闭弹层
  const closePopup = () => {
    popupRef.value.close()
  }
</script>

<template>
  <view class="test-page">
    <view class="popup-demo">
      <button @click="openPopup" class="button" type="primary">打开弹层</button>
      <button @click="closePopup" class="button" type="primary">关闭弹层</button>
    </view>

    <uni-popup ref="popupRef" @maskClick="onMaskClick" :is-mask-click="false" type="bottom">
      <view class="popup-container"></view>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
  .popup-demo {
    display: flex;
    justify-content: space-between;
    margin: 30rpx 0;

    .button {
      width: 300rpx;
      margin: 0;
    }
  }

  .popup-container {
    height: 400rpx;
    background-color: #fff;
  }
</style>
